<template>
  <div>
    <el-table ref="table" :data="list" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
      <el-table-column align="center" :label="translate('specialCardName')" min-width="120" prop="name" show-overflow-tooltip />
      <el-table-column align="center" :label="translate('beje')" min-width="100" prop="balance" show-overflow-tooltip />
      <el-table-column align="center" :label="translate('bjyxqz')" min-width="160" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.balanceValidTimeEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="translate('giveMoney')" min-width="100" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.giveBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="translate('zjyxqz')" min-width="160" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.giveBalanceValidTimeEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="translate('handle')" min-width="80" show-overflow-tooltip>
        <template v-slot="scope">
          <!-- -->
          <span v-if="meta.indexOf('MemberSpecialCardUseList') > -1" class="primaryColor pointer" @click="handleZxkDetails(scope.row.id)" style="margin-right: 10px;">{{ $t('message.ckmx') }}</span>
          <span v-if="meta.indexOf('MemberWithdrawal') > -1" class="primaryColor pointer" @click="handleWithdraw(scope.row)">{{ translate("tx") }}</span>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :total="total" @SizeChange="pageSizeChange" :page="pagination.page" @current-change="handleCurrentChange" />
    <el-dialog :title="translate('zxkyetx')" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog" :visible.sync="isShowWithdraw" width="600px" class="form_wrap">
      <div class="header df_ac">
        <span class="flex1">{{ translate("bjye") }}：<span class="red">{{ activeRow.balance }}{{ translate("rmb") }}</span></span>
        <span class="flex1">{{ translate("zsye") }}：{{ activeRow.giveBalance
        }}{{ translate("rmb") }}</span>
      </div>
      <el-form ref="formRef" :model="activeRow" label-width="auto" :rules="rules">
        <el-form-item prop="amount" :label="translate('bjjs')">
          <el-input v-model="activeRow.amount" :maxlength="50" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" clearable />
          <div class="placeholder9">{{ translate("zgjewbj") }}</div>
        </el-form-item>
        <el-form-item prop="giveAmount" :label="translate('zjjs')">
          <el-input v-model="activeRow.giveAmount" :maxlength="50" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" clearable />
          <div class="placeholder9">{{ translate("zgjewzj") }}</div>
        </el-form-item>
        <el-form-item prop="realAmount" :label="translate('sdje')">
          <el-input v-model="activeRow.realAmount" :maxlength="50" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" clearable />
          <div class="placeholder9">{{ translate("zgjewbj") }}</div>
        </el-form-item>
        <el-form-item prop="note" :label="translate('txsm')">
          <el-input v-model="activeRow.note" clearable :placeholder="translate('qsr')" />
        </el-form-item>
        <el-form-item prop="type" :label="translate('withdrawFs')">
          <el-radio-group v-model="activeRow.type">
            <el-radio-button label="0">{{ translate("wx") }}</el-radio-button>
            <el-radio-button label="1">{{ translate("zfb") }}</el-radio-button>
            <el-radio-button label="2">{{ translate("xj") }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowWithdraw = false">{{
          translate("cancel")
        }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ translate("qd") }}</el-button>
      </div>
    </el-dialog>
    <orderDetail ref="orderDetail" />
  </div>
</template>

<script>
import {
  specialCardByMemId,
  memberWithdraw
} from '@/api'
import orderDetail from '@/views/vipList/vipDetails/tabs/detail.vue'
export default {
  components: {
    orderDetail,
  },
  props: {
    memberInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isShowWithdraw: false,
      subLoading: false,
      activeRow: {
        type: '0',
        amount: '',
        giveAmount: ''
      },
      list: [],
      meta: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      rules: {
        amount: [{ required: true, message: this.translate('placeInput'), trigger: 'blur' }],
        realAmount: [{ required: true, message: this.translate('placeInput'), trigger: 'blur' }],
        giveAmount: [{ required: true, message: this.translate('placeInput'), trigger: 'blur' }],
        note: [{ required: true, message: this.translate('placeInput'), trigger: 'blur' }],
        type: [{ required: true, message: this.translate('qxz'), trigger: 'change' }]
      },
      modalDialog: this.$store.getters.dialog
    }
  },
  created () {
    this.getList()
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    onSubmit () {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          const param = { ...this.activeRow }
          if (param.realAmount > param.balance) {
            return this.$message.warning(this.translate('sdjeyxy'))
          }
          param.amount = param.amount * 1
          param.giveAmount = param.giveAmount * 1
          this.subLoading = true
          memberWithdraw({ param: { ...param, cardType: '1', cardId: param.id, memberId: this.memberInfo.id } }).then(res => {
            if (res.errorCode !== '000000') return
            this.subLoading = false
            this.isShowWithdraw = false
            this.$message.success(this.translate('txScs'))
            this.getList()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    handleZxkDetails (id) {
      this.$refs.orderDetail.handel(id)
    },
    handleWithdraw (row) {
      this.activeRow = { ...row, amount: row.balance, giveAmount: row.giveBalance, type: '0' }
      this.isShowWithdraw = true
    },
    getList (page) {
      this.listLoading = true
      if (page) {
        this.pagination.page = page
      }
      specialCardByMemId({ pagination: this.pagination, param: { memberId: this.memberInfo.id } }).then(res => {
        this.listLoading = false
        if (res.errorCode !== '000000') return
        this.list = res.recordList
        this.total = res.totalCount
      })
    },
    pageSizeChange (val) {
      this.pagination.rows = val
      this.getList(1)
    },
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.form_wrap {
  div {
    line-height: 24px;
  }

  .header {
    background-color: #f7f7f7;
    padding: 10px 60px;
    margin: 0 22px 20px;
  }
}
</style>
